<template>
  <div class="order-detail-outer">
    <div class="order-detail">
      <div class="order-header-bar">
        <el-button @click="$router.push('/shop')" type="primary" class="header-back-btn">返回商城</el-button>
      </div>
      <h2 class="order-title">订单详情</h2>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading">
        <el-skeleton rows="4" animated />
      </div>

      <!-- 失败提示 -->
      <div v-else-if="error">
        <el-alert type="error" :closable="false" :title="error" />
        <el-button type="primary" @click="fetchOrder">重试查询</el-button>
      </div>

      <!-- 显示订单 -->
      <div v-else-if="orders && orders.length">
        <div v-for="order in orders" :key="order.order_no" class="order-card">
          <el-card shadow="hover" class="order-card-inner">
            <p class="order-no"><strong>订单号：</strong>{{ order.order_no }}</p>
            <p class="order-product"><strong>商品名称：</strong>{{ order.product.name }}</p>
            <p><strong>数量：</strong>{{ order.quantity }}</p>
            <p><strong>价格：</strong>￥{{ order.price }}</p>
            <p>
              <strong>状态：</strong>
              <el-tag :type="order.status === 'paid' ? 'success' : 'warning'" size="large" effect="dark">
                <!-- {{ statusText(order.status) }} -->
                  {{ statusText("已支付") }}
              </el-tag>
            </p>
            <p><strong>下单时间：</strong>{{ order.timestamp ? formatTime(order.timestamp) : '暂未提供' }}</p>
          </el-card>
        </div>
        <div class="order-total">
          共 <b>{{ orders.length }}</b> 笔商品，合计：
          <span class="total-amount">￥{{ totalAmount }}</span>
        </div>
      </div>

      <!-- 无订单 -->
      <div v-else class="empty">
        <el-empty description="未找到订单信息" />
      </div>

      <el-divider />
      <div style="text-align:center;">
        <el-button @click="$router.push('/shop')" type="primary" size="large" class="back-btn">返回商城</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const orders = ref(null)
const loading = ref(false)
const error = ref('')

const statusText = (status) => {
  const map = {
    pending: '待支付',
    paid: '已支付',
    cancelled: '已取消',
    shipped: '已发货',
    completed: '已完成',
  }
  return map[status] || status
}

const formatTime = (ts) => {
  if (!ts) return ''
  // 兼容字符串或ISO格式
  const date = new Date(ts)
  return date.toLocaleString()
}

const totalAmount = computed(() => {
  if (!orders.value) return '0.00'
  return orders.value.reduce((sum, o) => sum + parseFloat(o.price), 0).toFixed(2)
})

const fetchOrder = async () => {
  const order_no = route.query.order_no || route.params.order_no
  if (!order_no) {
    error.value = '订单号缺失'
    return
  }
  loading.value = true
  error.value = ''
  orders.value = null
  try {
    const res = await request.get('/shop/order/detail/', {
      params: { order_no }
    })
    if (res.code === 0 && res.orders?.length) {
      orders.value = res.orders
    } else {
      error.value = res.msg || '订单不存在'
    }
  } catch (e) {
    error.value = '网络请求失败'
  } finally {
    loading.value = false
  }
}

onMounted(fetchOrder)
</script>

<style scoped>
.order-detail-outer {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7fbff;
}
.order-detail {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  background: #f7fbff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(30,144,255,0.08);
}
.order-header-bar {
  margin-bottom: 8px;
}
.header-back-btn {
  font-weight: bold;
  font-size: 1rem;
  background: linear-gradient(90deg, #1e90ff 0%, #00c6ff 100%);
  border: none;
  border-radius: 6px;
}
.order-title {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: #1e90ff;
  margin-bottom: 32px;
  text-align: center;
}
.order-card {
  margin-bottom: 24px;
}
.order-card-inner {
  border-radius: 14px;
  background: linear-gradient(90deg, #e0f7fa 0%, #f5f7fa 100%);
  box-shadow: 0 2px 8px rgba(30,144,255,0.08);
  padding: 18px 24px;
}
.order-no {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 6px;
}
.order-product {
  font-size: 1.15rem;
  font-weight: bold;
  color: #222;
  margin-bottom: 6px;
}
.order-total {
  text-align: right;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 18px 0 8px 0;
  color: #1e90ff;
}
.total-amount {
  color: #ff5722;
  font-size: 1.3rem;
  margin-left: 8px;
}
.back-btn {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 10px 32px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1e90ff 0%, #00c6ff 100%);
  border: none;
  letter-spacing: 1px;
}
.loading {
  text-align: center;
  margin-top: 48px;
}
.empty {
  margin-top: 48px;
  text-align: center;
}
</style>
